<script setup>
import {ref,onMounted,computed} from 'vue'
import {app} from '@/main'

// 根据地震级数渲染颜色
const colors =ref({
  Ⅵ: "#FFCC00",
  Ⅶ: "#FF9900",
  Ⅷ: "#FF3300",
  Ⅸ: "#FF0000",
  Ⅹ: "#990000",
})
const getStyle = (feature) => {
  const intensity = feature.get('地震烈度')
  const color = colors.value[intensity]
  return new ol.style.Style({
    image:new ol.style.Circle({
      radius:6,
      fill:new ol.style.Fill({color:color}),
      stroke:new ol.style.Stroke({
        color:'#ffffff',
        width:1
      })
    })
  })
}
// 设置聚合样式
const getClusterStyle = (feature) => {
  const size = feature.get('features').length
  let style

  if(size > 1) {
    const color = size > 20 ?'#ff0000' : size > 10 ? '#ff9900' : '#3399cc'
    const radius = Math.min (12 + size,20)
    style = new ol.style.Style({
      image:new ol.style.Circle({
        radius:radius,
        fill:new ol.style.Fill({
          color:color
        }),
        stroke:new ol.style.Stroke({
          color:'#fff',
          width:2
        })
      }),
      text:new ol.style.Text({
        text:size.toString(),
        fill:new ol.style.Fill({
          color:'#fff'
        }),
        font:'bold 14px Arial, sans-serif',
        stroke:new ol.style.Stroke({
        color:'#000',
        width:2
      }),
      }),

    })
    style.getImage().setOpacity(0.75+size /100)
  } else{
    const originalFeature = feature.get('features')[0]
    style = getStyle(originalFeature)
  }
  return style
}
// 坐标
let coordinate =ref([])
const formatCoordinate = computed(() => {
  if(coordinate.value.length === 2) {
    const [lon,lat] = coordinate.value
    return `lon:${lon.toFixed(3)},lat:${lat.toFixed(3)}`
  } else {
    return ''
  }
})

// 设置底图
const tiandituVecLayer = new ol.layer.Tile({
  title:'天地图矢量图层',
  source:new ol.source.XYZ({
    url:'http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk='+'a85922d1e9c93714493f60221b04402e',
    wrapX:false,
    crossOrigin: "anonymous"
  })
})
const tiandituImgLayer = new ol.layer.Tile({
  title: '天地图影像图层',
  source: new ol.source.XYZ({
    url: 'http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=' +'a85922d1e9c93714493f60221b04402e',
    wrapX:false,
    crossOrigin: "anonymous"
  })
})
const tiandutiCvaLayer = new ol.layer.Tile({
  title:'天地图矢量注记图层',
  source:new ol.source.XYZ({
    url: 'http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=' +'a85922d1e9c93714493f60221b04402e',
    wrapX:false,
    crossOrigin: "anonymous"
  })
})
// 点聚合
const clusterSource = new ol.source.Cluster({
  wrapX:false,
  distance:40,
  source:new ol.source.Vector({
    url:'/src/assets/SCdiaster.json',
    format:new ol.format.GeoJSON(),
  })
})
const disasterPointLayer = new ol.layer.Vector({
  title:'地质灾害点',
  source:clusterSource,
  style:getClusterStyle
})
// 四川省边界
const sichuanBoundaryLayer = new ol.layer.Vector({
  title:'四川省边界',
  source:new ol.source.Vector({
    url:'/src/assets/sichuan.json',
    format:new ol.format.GeoJSON(),
    wrapX:false,
  }),
  style:new ol.style.Style({
    stroke:new ol.style.Stroke({
      color:'#0056b3',
      width:3
    })
  })
})
onMounted(() => {
  const map = new ol.Map({
    target:'map',
    layers:[tiandituVecLayer,tiandituImgLayer,tiandutiCvaLayer,disasterPointLayer,sichuanBoundaryLayer],
    view:new ol.View({
      center:[102.7,30.6],
      zoom:6,
      projection:'EPSG:4326'
    }),
    interactions:new ol.interaction.defaults({
     doubleClickZoom:false,   //屏蔽双击放大事件
    }),
    // canvasContextOptions: { willReadFrequently: true }
  })
  map.on('pointermove',(e) => {
    coordinate.value = e.coordinate
  })
  app.provide('$map', map)
})

</script>



<template>
  <div class="map-module-container">
    <div id="map"></div>
    <div v-if="coordinate.length > 0" id="mousePosition">
      <i class="iconfont icon-jingweidu"></i> {{ formatCoordinate }}
    </div>
    <div v-else id="mousePosition">请把你的鼠标放在地图上</div>
  </div>
</template>

<style lang="scss" scoped>
.map-module-container {
  width: 100%;
  height: 100%;
  position: relative;

  #map {
    width: 100%;
    height: 100%;
  }

  #mousePosition {
    position: absolute;
    right: 10px; // 调整右边距
    bottom: 10px; // 调整下边距
    width: 250px; // 增加宽度
    background-color: rgba(0, 0, 0, 0.6); // 设置背景颜色为半透明黑色
    color: #ffffff; // 文字颜色改为白色
    padding: 10px 15px; // 增加内边距
    border-radius: 12px; // 圆角变大
    font-size: 16px; // 字体变大
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8); // 增强文字阴影效果
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5); // 增强阴影效果
    transition: transform 0.3s ease, box-shadow 0.3s ease; // 保持过渡效果
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
    z-index: 1000; // 增加z-index以确保显示在地图上方

    .iconfont {
      color: #ffcc00; // 图标颜色改为黄色以提高对比度
      margin-right: 5px;
    }
  }

  #mousePosition:hover {
    transform: scale(1.07); // 稍微放大
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.7); // 悬停时的阴影效果稍微增强
  }
}
</style>

